<template>
<div class="sales-board">
    <div class="sales-board-intro">
        <h2>流量分析</h2>
        <p>是指在获得网站访问量基本数据的情况下对有关数据进行统计、分析，从中发现用户访问网站的规律，并将这些规律与网络营销策略等相结合，从而发现目前网络营销活动中可能存在的问题，并为进一步修正或重新制定网络营销策略提供依据。当然这样的定义是站在网络营销管理的角度来考虑的</p>
    </div>
    <div class="sales-board-form">
        <div class="sales-board-line">
            <div class="sales-board-line-left">
                购买数量:
            </div>
            <div class="sales-board-line-right">
                <v-counter @on-change="onParamChange('buyNum',$event)"></v-counter>
            </div>
        </div>
        <div class="sales-board-line">
            <div class="sales-board-line-left">
                产品类型:
            </div>
            <div class="sales-board-line-right">
               <v-selection :selections="buyTypes" @on-change="onParamChange('buyType',$event)"></v-selection>
            </div>
        </div>
        <div class="sales-board-line">
            <div class="sales-board-line-left">
                有效时间:
            </div>
            <div class="sales-board-line-right">
                <v-chooser :selections="periodList" @on-change="onParamChange('period',$event)"></v-chooser>
            </div>
        </div>
        <div class="sales-board-line">
            <div class="sales-board-line-left">
                产品版本:
            </div>
            <div class="sales-board-line-right">
                <v-mul-chooser :selections="versionList" @on-change="onParamChange('version',$event)"></v-mul-chooser>
            </div>
        </div>
        <div class="sales-board-line">
              <div class="sales-board-line-left">
                  总价：
              </div>
              <div class="sales-board-line-right">
                  {{price}}元
              </div>
        </div>
        <div class="sales-board-line">
              <div class="sales-board-line-left">&nbsp;</div>
              <div class="sales-board-line-right">
                  <div class="button" @click="showBuyDialog">
                    立即购买
                  </div>
              </div>
        </div>
    </div>

    <div class="sales-board-des">
        <h2>产品说明</h2>
        <p>网站访问统计分析报告的基础数据源于网站流量统计信息，但其价值远高于原始数据资料。专业的网站访问统计分析报告对网络营销的价值，正如专业的财务分析报告对企业经营策略的价值。</p>

        <h3>用户行为指标</h3>
        <ul>
          <li>用户行为指标主要反映用户是如何来到网站的、在网站上停留了多长时间、访问了哪些页面等，主要的统计指标包括：</li>
          <li>用户在网站的停留时间；</li>
          <li>用户来源网站（也叫“引导网站”）；</li>
          <li>用户所使用的搜索引擎及其关键词；</li>
          <li>在不同时段的用户访问量情况等。</li>
        </ul>

        <h3>浏览网站方式</h3>
        <ul>
          <li>用户上网设备类型</li>
          <li>用户浏览器的名称和版本</li>
          <li>访问者电脑分辨率显示模式</li>
          <li>用户所使用的操作系统名称和版本</li>
          <li>用户所在地理区域分布状况等</li>
        </ul>
      </div>
      <!--只有一个根节点，所有在此次使用 -->
      <my-dialog :is-show="isShowPayDialog" @on-close="hideBuyDialog">
        <table class="buy-dialog-table">
          <tr>
            <th>购买数量</th>
            <th>产品类型</th>
            <th>有效时间</th>
            <th>产品版本</th>
            <th>总价</th>
          </tr>
          <tr>
            <td>{{ buyNum }}</td>
            <td>{{ buyType.label }}</td>
            <td>{{ period.label }}</td>
            <td>
              <span v-for="(item,index) in version" :key="index">{{ item.label }}</span>
            </td>
            <td>{{ price }}</td>
          </tr>
        </table>
         <!--选择银行 -->
        <h3 class="buy-dialog-title">请选择银行</h3>
        <bank-chooser @on-change="changeBank"></bank-chooser>
        <div class="button buy-dialog-btn" @click="comfirmBuy">
            确认购买
        </div>
      </my-dialog>
      <check-order :is-show-check-dialog="isShowCheckOrder" :order-id="orderId" 
      @on-close-check-dialog="hideCheckOrder">
      </check-order>
</div>
</template>
<script>
import vSelection from '../../components/base/selection'
import vChooser from '../../components/base/chooser'
import VMulChooser from '../../components/base/multiplyChooser'
import VCounter from '../../components/base/counter'
import myDialog from '../../components/dialog'
import bankChooser from '../../components/bankChooser'
import checkOrder from '../../components/checkOrder'
import _ from 'lodash'
export default {
    components:{
        vSelection,
        vChooser,
        VMulChooser,
        VCounter,
        myDialog,
        bankChooser,
        checkOrder
    },
    data(){
        return {
        buyNum:1,
        buyType:{},
        period:{},
        version:[],
        price:0,
        versionList: [ //checkbox多个选择形式
            {
            label: '客户版',
            value: 0
            },
            {
            label: '代理商版',
            value: 1
            },
            {
            label: '专家版',
            value: 2
            }
      ],
        periodList: [//checkbox的形式
            {
            label: '半年',
            value: 0
            },
            {
            label: '一年',
            value: 1
            },
            {
            label: '三年',
            value: 2
            }
          ],
            buyTypes: [ //select的下拉形式
                {
                label: '入门版',
                value: 0
                },
                {
                label: '中级版',
                value: 1
                },
                {
                label: '高级版',
                value: 2
                }
            ],
            isShowPayDialog:false,
            bankId:null,
            orderId:null,
            isShowCheckOrder:false
        }
    },
    methods:{
        onParamChange(attr,event){ //子组件获取父组件的值
        console.log('参数的值：' + attr + '  事件event的值  ' + event);
           this[attr] = event;
           console.log(attr, this[attr]);
           this.getPrice();//事件变化计算价格
        },
        getPrice(){
            //将对象存放到数组中
            let buyVersionArray =_.map(this.version,iteam =>{
                return iteam.value; //将对象中的value存到数组中
            })
            console.log('buyVersionArray的值  ' ,buyVersionArray);//let定义，而不能使用this.buyVersionArray
            let reqParam = {
                buyNum :this.buyNum,
                buyType:this.buyType.value,
                period:this.period.value,
                version:buyVersionArray.join(',')
            }
            console.log(reqParam);
            this.$http.post('/api/getPrice',reqParam)
            .then((res) =>{
                console.log(res);
                this.price = res.data.amount;
            },(error) =>{
                console.log(error);
            })
        },
        showBuyDialog(){
            this.isShowPayDialog = true;
        },
        hideBuyDialog(){
            console.log('支付成功之后自动隐藏');
            this.isShowPayDialog = false;
        },
        changeBank(obj){
            console.log('子组件通过emit事件传递到父组件  ',obj);
            this.bankId = obj.id;
            console.log('子组件传递过来的bankId '+this.bankId);
        },
        comfirmBuy(){
            //将对象存放到数组中
            let buyVersionArray =_.map(this.version,iteam =>{
                return iteam.value; //将对象中的value存到数组中
            })
            console.log('buyVersionArray的值  ' ,buyVersionArray);//let定义，而不能使用this.buyVersionArray
            let reqParam = {
                buyNum :this.buyNum,
                buyType:this.buyType.value,
                period:this.period.value,
                version:buyVersionArray.join(','),
                bankId:this.bankId
            }
            console.log(reqParam);
            this.$http.post('/api/createOrder',reqParam)
            .then((res) =>{
                console.log(res);
                this.orderId = res.data.orderId;
                this.isShowCheckOrder = true;//弹出支付状态，隐藏银行界面
                this.isShowPayDialog = false;//选择银行的界面
                console.log('支付之后的orderId',this.orderId);
            },(error) =>{
                console.log(error);
                this.isShowBuyDialog = false
                this.isShowErrDialog = true
            })
        },
        hideCheckOrder(){
            this.isShowCheckOrder = false;
        }
    },
    mounted(){ //组件渲染完之后，初始化数据
        this.buyNum = 1,
        this.buyType = this.buyTypes[0],
        this.period = this.periodList[0],
        this.version = [this.versionList[0]] //获取数组的写法 此方法是错误this.versionList[0]
        //请求数据
        this.getPrice();
    }

}
</script>

<style scoped>
.buy-dialog-title{font-size:16px;font-weight:bold}
.buy-dialog-btn{margin-top:20px}
.buy-dialog-table{width:100%;margin-bottom:20px}
.buy-dialog-table td,.buy-dialog-table th{border:1px solid #e3e3e3;text-align:center;padding:5px 0}
.buy-dialog-table th{background:#4fc08d;color:#fff;border:1px solid #4fc08d}
</style>

